<script setup>
import { EditPen, Delete } from '@element-plus/icons-vue'
import { ref, reactive, getCurrentInstance, onMounted, h } from "vue"
const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties //vue3获取当前this
const storage = _this.$utils.storage;

import { globalStore } from "@/store/global";
const globalVue = globalStore();
const isEdit = ref(globalVue.userInfo?.role != 2 || false); 
// 组件中使用，接收传参的
defineProps({
  row: Object,
  default: {}
})
// 组件中使用，接收事件的
const emits = defineEmits(['operate1', 'operate2', 'operate3', 'operate4', 'operate5']);
</script>
<template>
  <!--  v-if="isEdit" -->
  <el-button class="btn1" v-if="isEdit" link type="primary" :icon="EditPen" @click="emits('operate1')">Edit</el-button> 
  <el-button class="btn1" v-if="isEdit" link type="primary" :icon="EditPen" @click="emits('operate2')">Upgrade Vehicle</el-button> 
  <el-button class="btn1" v-if="isEdit" link type="primary" :icon="EditPen" @click="emits('operate3')">Upgrade Camera</el-button> 
  <el-button class="btn2" v-if="isEdit" link type="success" :icon="Delete" @click="emits('operate4')">
    <template #icon>
      <img style="width: 16px;height: 16px" src="@/assets/image/icon/list_ico_delete.png" alt="">
    </template>
    Delete  
  </el-button>  
</template>
<style lang="less" scoped>
// .btn1{
//   --el-button-text-color: #5F6060;
// }
.btn2{
  --el-button-text-color: #FB393C;
}
</style>